<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				padding: 20px;
				border: 1px solid #000;
			}
			#d2{
				padding: 30px;
				border: 1px solid #ff0;
			}
			#d3{
				padding: 40px;
				border: 1px solid #f00;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				<div id="d3">
					<span id="d4">fjljlfdjslkkkkkkkk</span>
				</div>
			</div>
		</div>
		<h1 id="xx"></h1>
		<script type="text/javascript">
			var d1=document.getElementById("d1");
			var d2=document.getElementById("d2");
			var d3=document.getElementById("d3");
			var d4=document.getElementById("d4");
			d1.onclick=function (e) {
				alert("d1--click");
			}
			d2.onclick=function (e) {
				alert("d2--click");
			}
			d3.onclick=function (e) {
				alert("d3--click");
			}
			d4.onclick=function (e) {
				alert("d4--click==>"+e.x+","+e.y+"=="+e.type);
				var ele=e.target;
				console.log(ele);
				e.stopPropagation()//阻止事件冒泡
			}			
			addEventListener("mousemove",function (e) {
				var s=e.x+","+e.y;
				document.getElementById("xx").innerHTML=s;
			});
		</script>
	</body>
</html>
